﻿@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>库存数据分析</title>
    <link href="~/scripts/layui-v2.5.6/layui/css/layui.css" rel="stylesheet" />
    <style>
        .dashboard-container {
            padding: 20px;
            background: #f2f2f2;
        }
        .stat-cards {
            display: flex;
            margin-bottom: 20px;
            gap: 20px;
        }
        .stat-card {
            flex: 1;
            background: #fff;
            padding: 20px;
            border-radius: 4px;
            box-shadow: 0 2px 4px rgba(0,0,0,.08);
        }
        .stat-card .title {
            color: #666;
            font-size: 14px;
            margin-bottom: 10px;
        }
        .stat-card .value {
            color: #333;
            font-size: 24px;
            font-weight: bold;
        }
        .chart-container {
            background: #fff;
            padding: 20px;
            margin-bottom: 20px;
            border-radius: 4px;
            box-shadow: 0 2px 4px rgba(0,0,0,.08);
        }
        .chart-row {
            display: flex;
            gap: 20px;
            margin-bottom: 20px;
        }
        .chart {
            height: 400px;
        }
        .chart-col {
            flex: 1;
        }
    </style>
</head>
<body>
    <div class="dashboard-container">
        <!-- 统计卡片 -->
        <div class="stat-cards">
            <div class="stat-card">
                <div class="title">总库存数量</div>
                <div class="value" id="totalGalleryNumber">-</div>
            </div>
            <div class="stat-card">
                <div class="title">物料种类</div>
                <div class="value" id="productTypeCount">-</div>
            </div>
            <div class="stat-card">
                <div class="title">仓库数量</div>
                <div class="value" id="warehouseCount">-</div>
            </div>
        </div>

        <!-- 图表行1 -->
        <div class="chart-row">
            <div class="chart-col">
                <div class="chart-container">
                    <div id="stockChart" class="chart"></div>
                </div>
            </div>
        </div>

        <!-- 图表行2 -->
        <div class="chart-row">
            <div class="chart-col">
                <div class="chart-container">
                    <div id="pieChart" class="chart"></div>
                </div>
            </div>
        </div>
    </div>

    <script src="~/scripts/jquery-3.4.1.min.js"></script>
    <script src="~/scripts/layui-v2.5.6/layui/layui.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>
    <script>
        // 初始化图表
        layui.use(['layer'], function() {
            var layer = layui.layer;

            // 获取统计数据
            $.get('/InventoryData/GetInventoryStatistics', function(response) {
                if (response.success) {
                    var data = response.data;
                    $('#totalGalleryNumber').text(data.totalGalleryNumber.toLocaleString());
                    $('#productTypeCount').text(data.productTypeCount);
                    $('#warehouseCount').text(data.warehouseCount);
                } else {
                    layer.msg('获取统计数据失败');
                }
            });

            // 获取库存数据并初始化柱状图
            $.get('/InventoryData/GetInventoryChartData', function(response) {
                if (response.success) {
                    initBarChart(response.data);
                } else {
                    layer.msg('获取柱状图数据失败');
                }
            });

            // 获取库存数据并初始化饼图
            $.get('/InventoryData/GetInventoryPieChartData', function(response) {
                if (response.success) {
                    initPieChart(response.data);
                } else {
                    layer.msg('获取饼图数据失败');
                }
            });

            // 初始化柱状图
            function initBarChart(chartData) {
                var stockChart = echarts.init(document.getElementById('stockChart'));
                stockChart.setOption({
                    title: { text: '库存数量' },
                    tooltip: { trigger: 'axis' },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        data: chartData.map(item => item.productName),
                        axisLabel: { interval: 0, rotate: 45 }
                    },
                    yAxis: {
                        type: 'value',
                        name: '数量'
                    },
                    series: [{
                        name: '库存数量',
                        type: 'bar',
                        data: chartData.map(item => item.galleryNumber),
                        itemStyle: {
                            color: function(params) {
                                var colorList = ['#36a2ef','#4ecb73','#fbd437','#f2637b','#975fe4','#36cbcb','#fd7b6c'];
                                return colorList[params.dataIndex % colorList.length];
                            }
                        },
                        label: {
                            show: true,
                            position: 'top'
                        }
                    }]
                });
            }

            // 初始化饼图
            function initPieChart(chartData) {
                var pieChart = echarts.init(document.getElementById('pieChart'));
                pieChart.setOption({
                    title: { text: '库存物料分布' },
                    tooltip: {
                        trigger: 'item',
                        formatter: function(params) {
                            return `${params.name}<br/>数量: ${params.value}<br/>占比: ${params.data.percentage}%`;
                        }
                    },
                    legend: {
                        orient: 'vertical',
                        right: 10,
                        top: 'center',
                        formatter: function(name) {
                            var data = chartData.find(item => item.productName === name);
                            return `${name}: ${data.percentage}%`;
                        }
                    },
                    series: [{
                        name: '物料分布',
                        type: 'pie',
                        radius: ['50%', '70%'],
                        avoidLabelOverlap: false,
                        itemStyle: {
                            borderRadius: 10,
                            borderColor: '#fff',
                            borderWidth: 2
                        },
                        label: {
                            show: true,
                            formatter: '{b}: {d}%'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '16',
                                fontWeight: 'bold'
                            }
                        },
                        data: chartData.map(item => ({
                            name: item.productName,
                            value: item.galleryNumber,
                            percentage: item.percentage
                        }))
                    }]
                });

                // 窗口大小改变时重绘图表
                window.addEventListener('resize', function() {
                    pieChart.resize();
                });
            }

            // 窗口大小改变时重绘所有图表
            window.addEventListener('resize', function() {
                var stockChart = echarts.init(document.getElementById('stockChart'));
                stockChart.resize();
            });
        });
    </script>
</body>
</html> 